<template>
  <!-- 个人中心 -->
  <div class="mine">
    <div class="header">
      <div class="img" @click="toModify">
        <van-image
          round
          width="4rem"
          height="4rem"
          fit="cover"
          :src="userInfo.avatarUrl"
        />
        <!--src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"-->

        <span>{{ userInfo.nickname }}</span>
      </div>
      <div>
        <van-icon name="chat-o" size="2rem" color="#fff" />
      </div>
    </div>
    <div class="main">
      <div class="box">
        <ul>
          <li @click="order">
            <strong>12</strong>
            <p>我的订单</p>
          </li>
          <li>
            <strong>{{ userInfo.concern }}</strong>
            <p>我的关注</p>
          </li>
          <li @click="balance">
            <strong>{{ userInfo.balance }}</strong>
            <p>我的余额</p>
          </li>
        </ul>
      </div>
      <ul class="list">
        <li @click="coupons">
          <div>
            <van-icon name="coupon-o" size="1.4rem" color="#666EE8" />
            <span>我的优惠券</span>
          </div>
          <van-icon name="arrow" size="1rem" />
        </li>
        <li @click="promote">
          <div>
            <van-icon name="gold-coin-o" size="1.4rem" color="#FFC71C" />
            <span>我的推广</span>
          </div>
          <van-icon name="arrow" size="1rem" />
        </li>
        <li @click="help">
          <div>
            <van-icon name="comment-o" size="1.4rem" color="#28D094" />
            <span>帮助与反馈</span>
          </div>
          <van-icon name="arrow" size="1rem" />
        </li>
        <li @click="this.$router.push('/setting')">
          <div>
            <van-icon name="setting-o" size="1.4rem" color="#1E9FF2" />
            <span>设置</span>
          </div>
          <van-icon name="arrow" size="1rem" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data() {
    return {
      num: '',
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters['userModule/userInfo']
    },
  },
  methods: {
    balance() {
      this.$router.push({
        name: 'balance',
      })
    },
    coupons() {
      this.$router.push('/coupons')
    },
    promote() {
      this.$router.push('/promote')
    },
    help() {
      this.$router.push('/consult')
    },
    order() {
      this.$router.push('/order')
    },
    toModify() {
      this.$router.push('/update')
    },
    async getUserInfo() {
      const result = JSON.parse(localStorage.getItem('vuex')).login
      if (localStorage.getItem('username')) {
        this.userInfo.avatarUrl = result.userInfo.avatarUrl
        this.userInfo.nickname = localStorage.getItem('username')
      } else if (
        !localStorage.getItem('username') &&
        this.$store.getters.token
      ) {
        this.userInfo = result.userInfo
      }
    },
    // async getUserInfo() {
    //   const result = JSON.parse(localStorage.getItem('vuex')).login
    //   if (localStorage.getItem('username')) {
    //     this.userInfo.avatarUrl = result.userInfo.avatarUrl
    //     this.userInfo.nickname = localStorage.getItem('username')
    //   } else if (
    //     !localStorage.getItem('username') &&
    //     this.$store.getters.token
    //   ) {
    //     this.userInfo = result.userInfo
    //   }
    // },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/index.less';
.mine {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(102, 110, 232);
    height: 10rem;
    padding: 0 2%;

    .img {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        color: #fff;
        padding-left: 1rem;
      }
    }
  }
  .box {
    width: 18rem;
    height: 6rem;
    border-radius: 0.5rem;
    top: 12rem;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background: #fff;
    border: 0.05rem solid #eee;
    ul {
      display: flex;
      width: 18rem;
      height: 6rem;
      justify-content: space-around;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1rem;

        strong {
          font-size: 1.4rem;
        }
      }
    }
  }
  .main {
    .list {
      margin-top: 5rem;
      li {
        height: 9vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.01rem solid #eee;
        padding: 0 2%;
        div {
          display: flex;
          align-items: center;
        }
        span {
          padding-left: 0.3rem;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
